<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form" autocomplete='off'>
    <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
    <nz-form-item>
        <nz-form-control>
            <nz-input-group class="full-width" nzSize="large" nzAddOnBeforeIcon="anticon anticon-user">
                <input nz-input [value]="settingsService.user.name" disabled="disabled">
            </nz-input-group>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control>
            <nz-input-group class="full-width" nzSize="large" nzAddOnBeforeIcon="anticon anticon-lock text-blue">
                <input nz-input type="password" formControlName="pwd" placeholder="原始密码">
            </nz-input-group>
            <ng-container *ngIf="pwd.dirty && pwd.errors">
                <nz-form-explain *ngIf="pwd.errors?.required">请输入原始密码！</nz-form-explain>
            </ng-container>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control>
            <nz-input-group class="full-width" nzSize="large" nz-popover nzPlacement="right"
                            [nzContent]="nzTemplate" nzAddOnBeforeIcon="anticon anticon-lock">
                <input nz-input type="password" formControlName="newPwd" placeholder="新密码（至少6位密码，区分大小写）">
            </nz-input-group>
            <nz-form-explain *ngIf="newPwd.dirty && newPwd.errors">密码至少六位</nz-form-explain>
            <ng-template #nzTemplate>
                <div style="padding: 4px 0;">
                    <ng-container [ngSwitch]="status">
                        <div *ngSwitchCase="'ok'" class="success">强度：强</div>
                        <div *ngSwitchCase="'pass'" class="warning">强度：中</div>
                        <div *ngSwitchDefault class="error">强度：太短</div>
                    </ng-container>
                    <div class="progress-{{status}}">
                        <nz-progress [nzPercent]="progress" [nzStatus]="passwordProgressMap[status]" [nzStrokeWidth]="6"
                                     [nzShowInfo]="false"></nz-progress>
                    </div>
                    <p class="mt-sm">请至少输入 6 个字符。请不要使用容易被猜到的密码。</p>
                </div>
            </ng-template>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control>
            <nz-input-group class="full-width" nzSize="large" nzAddOnBeforeIcon="anticon anticon-lock">
                <input nz-input type="password" formControlName="newPwd2" placeholder="确认密码">
            </nz-input-group>
            <ng-container *ngIf="newPwd2.dirty && newPwd2.errors">
                <nz-form-explain *ngIf="newPwd2.errors?.required">请确认密码！</nz-form-explain>
                <nz-form-explain *ngIf="newPwd2.errors?.equar">两次输入的密码不匹配！</nz-form-explain>
            </ng-container>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <button nz-button nzType="primary" nzSize="large" type="submit" class="submit"
                style="display:block;width: 100%;" [nzLoading]="loading">
            <span>修改</span>
        </button>
    </nz-form-item>
</form>
